<link rel="stylesheet" href="__CDN__/assets/addons/sum/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/sum/libs/common_sum.css">
<style>
    #storeIndex {
        color: #444;
    }

    .el-pagination,
    .el-pagination__total,
    .el-input__inner,
    .el-pagination__jump {
        color: #444;
    }

    .common-btn {
        height: 32px;
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .el-input__inner,
    .el-input__icon {
        line-height: 32px;
        height: 32px;
    }

    .btn-box {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        justify-content: space-between;
    }

    .refresh-btn {
        width: 32px;
        border: 1px solid #E6E6E6;
        font-size: 14px;
        margin-right: 20px;
    }

    .create-goods,
    .add-params,
    .add-level1-sku {
        width: 98px;
        background: #7536D0;
        color: #fff;
    }

    .create-goods {
        margin-right: 40px;
    }

    .create-goods span,
    .add-params span,
    .add-level1-sku span {
        margin-left: 8px;
    }

    .goods-name {
        display: flex;
        align-items: stretch;
    }

    .goods-img {
        width: 60px;
        height: 60px;
        margin-right: 10px;
        border: 1px solid #e6e6e6;
        flex-shrink: 0;
    }

    .el-table,
    .el-table thead,
    .el-table th {
        color: #444;
        font-weight: 500 !important;
        font-size: 13px;
    }

    .display-flex {
        display: flex;
        align-items: center;
    }


    .label-auto {
        width: 100%;
        height: 100%;
    }

    .el-radio-button__inner,
    .el-radio-button__inner:hover {
        height: 32px;
        line-height: 32px;
        width: 80px;
        text-align: center;
        padding: 0;
        color: #666;
    }

    .el-radio__input.is-checked+.el-radio__label,
    .el-tabs__item.is-active,
    .el-tabs__item:hover,
    .el-pager li.active,
    .el-select-dropdown__item.selected {
        color: #7438D5;
    }

    .el-radio__input.is-checked .el-radio__inner,
    .el-tabs__active-bar,
    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background: #7438D5;
        border-color: #7438D5;
    }

    .one-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .sort-order {
        margin-left: 6px;
        color: #C0C4CC;
        flex-direction: row-reverse;
    }

    .recycle-btn {
        width: 88px;
        color: #444;
        border: #444 1px solid;
    }

    .recycle-btn i {
        margin-right: 6px;
        font-size: 14px;
    }

    .all-btn-up,
    .all-btn-del,
    .all-btn-up1 {
        width: 60px;
        border: 1px solid #E5E5E5;
        margin-right: 20px;
    }

    .all-btn-up1:hover {
        color: #7438D5;
        border-color: #7438D5;
    }

    .all-btn-up:hover {
        color: #50E3C2;
        border-color: #50E3C2;
    }

    .all-btn-del:hover {
        color: #FF5959;
        border-color: #FF5959;
    }

    .status-box {
        width: 100%;
        justify-content: space-between;
    }

    .status-btn {
        width: 56px;
        height: 26px;
        border: 1px solid #7438D5;
        color: #7438D5;
        font-size: 12px;
    }

    .status-btn-2 {
        color: #FF5959;
        border-color: #FF5959;
    }

    .status-btn-3 {
        color: #999;
        border-color: #999;
    }

    .el-table th {
        background: #F9F9F9;
        padding: 7px 0;
    }

    .el-tabs__item {
        width: 80px;
        padding: 0;
        padding-right: 20px;
        text-align: center;
        color: #666;
    }

    .el-tabs__nav-wrap::after {
        height: 1px;
    }

    .icon-top {
        margin-left: -5px;
    }

    .edit-text,
    .copy-text,
    .del-text {
        cursor: pointer;
        color: #444;
    }

    .copy-text {
        margin: 0 14px;
    }

    .edit-text:hover {
        color: #7438D5;
    }

    .copy-text:hover {
        color: #01CFA1;
    }

    .del-text:hover {
        color: #FF5959;
    }

    .el-button--primary,
    .el-button--primary:hover {
        background: #7438D5 !important;
        border-color: #7438D5 !important;
        color: #fff;
    }

    .el-popover {
        left: 46px;
        top: 10px;
    }

    .choose-container {
        margin-bottom: 10px;
    }

    .custom-choose,
    .custom-choose-type,
    .custom-choose-sub {
        height: 50px;
        border-radius: 4px;
        justify-content: space-between;
        padding: 0 20px;
        background: #fff;
    }

    .custom-choose-type,
    .custom-choose-sub {
        justify-content: flex-start;
    }

    .custom-choose-sub {
        height: 70px;
        padding: 0 10px 20px 20px;
    }

    .choose-status-tip {
        margin-right: 12px;
    }

    .custom-choose-type-tip {
        margin-right: 16px;
    }

    .choose-btn {
        width: 80px;
        border: 1px solid #E6E6E6;
        margin-right: 10px;
        height: 30px;
    }

    .choose-btn-active {
        background-color: #7536D0;
        border: none;
        color: #fff;
    }

    .choose-price {
        width: 140px;
    }

    .choose-price-line {
        margin: 0 14px;
    }

    .el-input-group__append,
    .el-input-group__prepend {
        width: 30px;
        text-align: center;
        padding: 0;
    }

    .custom-table {
        padding: 20px 20px 30px;
        background: #fff;
    }

    .custom-header {
        justify-content: space-between;
        margin-bottom: 14px;
    }

    label {
        margin-bottom: 0;
    }

    .custom-refresh {
        width: 34px;
        height: 32px;
        border: 1px solid #E6E6E6;
        font-size: 16px;
        justify-content: center;
        margin-right: 20px;
        border-radius: 4px;
    }

    .page-container {
        justify-content: space-between;
        margin-top: 30px;
    }

    /* .el-table td,
    .el-table th,
    .el-table th.is-leaf {
        border-color: #f7f7f7;
        padding: 0;
    } */

    /* .el-table th .cell,
    .el-table td .cell {
        height: 44px;
        display: flex;
        align-items: center;
        line-height: 20px;
        justify-content: center;
    } */

    /* .el-table th .cell {
        height: 40px;
    } */

    .goods-title {
        margin-bottom: 4px;
        width: 154px;
        line-height: 14px;
    }

    .activity-type {
        justify-content: space-around;
    }

    .activity-type-btn {
        width: 40px;
        height: 20px;
        padding-top: 2px;
        border-radius: 4px;
        color: #fff;
        justify-content: center;
    }

    .seckill-btn {
        background: #FFF4F3;
        border: 1px solid #FECAC4;
        color: #FE9488;
    }

    .groupon-btn {
        background: #F1EDFA;
        border: 1px solid #CEBEEC;
        color: #9C7EDA;
    }

    .score-btn {
        background: #FDF5E8;
        border: 1px solid #F8DCAE;
        color: #F2BA5E;
    }

    .el-table .bg-color {
        background: #f9f9f9;
    }

    .cell-left .cell {
        justify-content: flex-start !important;
    }

    .el-table_1_column_11.is-leaf,
    .el-table_1_column_11 {
        border-color: #EBEEF5 !important;
    }

    .el-radio-button__inner {
        font-size: 12px;
    }

    .el-table__fixed-right::before,
    .el-table__fixed::before {
        height: 0 !important;
    }

    .ellipsis-item {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .el-table td,
    .el-table th {
        padding: 10px 0 9px;
    }

    [v-cloak] {
        display: none
    }

    .close-status,
    .open-status {
        text-align: center;
    }

    .close-status {
        color: #666;
    }

    .open-status,
    .edit-btn-text {
        color: #7438D5;
    }

    .close-status,
    .delete-btn-text {
        color: #FF5959;
    }

    .close-btn-text {
        margin: 0 20px;
    }
    .opt-container>div {
        margin-right: 14px;
    }
    .btn-import {
        width: 98px;
        color: #fff;
        background: #f39c12;
    }
    .btn-danger {
        width: 98px;
        color: #fff;
    }
    .arrow-close i {
        animation-iteration-count: infinite;
        transform: rotateZ(0deg);
    }

    .arrow-close {
        width: 36px;
        height: 32px;
        margin-left: 20px;
        background: #7438D5;
        border-radius: 4px;
        color: #fff;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .arrow-open {
        width: 36px;
        height: 32px;
        margin-left: 20px;
        background: #fff;
        border-radius: 4px;
        color: #7438D5;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #7438D5;

    }

    .arrow-close .arrow-container {
        transform: rotateZ(0deg);
        transition: transform .25s linear;
    }

    .arrow-open .arrow-container {
        transform: rotateZ(180deg);
        transition: transform .25s linear;
    }

    .sum-pagination-container{
        justify-content: space-between;
    }
    .multiple-set-acitve-1,.multiple-set-acitve-2,.multiple-set-acitve-3{
        cursor: pointer;
        margin-right: 14px;
    }
    .multiple-set-acitve .multiple-set-acitve-1{
        color: #60CC9E;
    }
    .multiple-set-acitve .multiple-set-acitve-2{
        color: #ED655F;
    }
    .multiple-set-acitve .multiple-set-acitve-3{
        color: #7438D5
    }
    .sum-pagination-container .sum-edit-text{
        color: inherit;
    }
    .multiple-set-item{
        color: #ccc;
    }
    .order-time {
        padding: 4px 6px;
        height: 32px;
        border: 1px solid #DCDFE6;
        border-radius: 4px 0px 0px 4px;
        border-right: none;
        flex-shrink: 0;
    }
</style>
<script src="__CDN__/assets/addons/sum/libs/vue.js"></script>
<script src="__CDN__/assets/addons/sum/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/sum/libs/Sortable.min.js"></script>
<script src="__CDN__/assets/addons/sum/libs/vuedraggable.js"></script>
<script src="__CDN__/assets/addons/sum/libs/moment.js"></script>
<div id="storeIndex" v-cloak v-loading="allAjax">
    <div class="choose-container">
        <div class="custom-choose display-flex">
            <div class="display-flex">
                <div class="choose-status" >
                    <div class="store-titles choose-status-tip">
                        油站管理
                    </div>
                </div>
                {if condition = "$auth->check('oil/store/store/add')"}
                <!--有添加权限就有导入打出权限-->
                <div class="common-btn btn-danger" style="margin-right: 12px;" @click="storeImport">
                    <i class="el-icon-upload"></i>
                    <span>导入油站</span>
                </div>
                <div class="common-btn btn-danger" style="margin-right: 12px;" @click="fuelImport">
                    <i class="el-icon-upload"></i>
                    <span>导入油品</span>
                </div>
                <div class="common-btn btn-import" style="margin-right: 12px;" @click="goExport('store_export')">
                    <i class="el-icon-download"></i>
                    <span>油站导出</span>
                </div>
                <div class="common-btn btn-import" style="margin-right: 12px;" @click="goExport('fuel_export')">
                    <i class="el-icon-download"></i>
                    <span>油品导出</span>
                </div>

                <div class="common-btn create-btn" style="margin-right: 12px;" @click="goEditPrice()">
                    <span>批量改价</span>
                </div>

                {/if}
            </div>
            <div class="custom-search">
                <el-input placeholder="请输入标题" suffix-icon="el-icon-search" v-model="searchKey">
                </el-input>
            </div>
        </div>
    </div>
    <div class="custom-table">
        <div class="custom-header display-flex">
            <div class="display-flex">
                <div class="custom-refresh display-flex" @click="getData">
                    <i class="el-icon-refresh"></i>
                </div>
                {if condition = "$auth->check('oil/store/store/add')"}
                <div class="btn-common create-btn" @click="operation('create',null)"><i class="el-icon-plus"></i>创建油站</div>
                {/if}
            </div>

            <div class="display-flex">
                {if condition = "$auth->check('oil/store/store/recyclebin')"}
                <div class="common-btn recycle-btn display-flex" @click="operation('recycle',null)">
                    <i class="fa fa-recycle"></i>
                    回收站
                </div>
                {/if}
            </div>
            <el-collapse-transition>
                <div class="screen-con" v-if="screenType">

                    <div class="header-button-item display-flex">
                        <div class="common-btn" @click="screenEmpty">重置</div>
                        <div class="common-btn header-button-select" @click="reqList(0,10)">筛选</div>
                    </div>
                </div>
            </el-collapse-transition>

        </div>
        <div class="sum-table-container">
            <div v-loading="tableAjax">
                <el-table ref="multipleTable" :data="storeData" border style="width: 100%" :row-class-name="tableRowClassName"
                          :cell-class-name="tableCellClassName" :header-cell-class-name="tableCellClassName"
                          @row-dblclick="operation"
                          @selection-change="handleSelectionChange"
                          >
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="ID" width="60">
                    </el-table-column>
                    <el-table-column label="油站名称" min-width="180">
                        <template slot-scope="scope">
                            <div class="ellipsis-item-1">
                                {{scope.row.name}}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="油站地址" min-width="320">
                        <template slot-scope="scope">
                            <div class="ellipsis-item-1">
                                {{scope.row.province_name}}{{scope.row.city_name}}{{scope.row.area_name}}{{scope.row.address}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="realname" label="联系人" width="100">
                    </el-table-column>
                    <el-table-column prop="phone" label="联系电话" width="120">
                    </el-table-column>

                    <el-table-column label="绑定打印机" min-width="200">
                        <template slot-scope="scope">
                            <div v-if="scope.row.printer">
                                <div class="ellipsis-item">{{scope.row.printer.title}}</div>
                            </div>
                            <div v-else>{{scope.row.printer_id}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="200" fixed="right">
                        <template slot-scope="scope">
                            <div class="opt-container display-flex">
                                <div class="cursor-pointer" :class="scope.row.status==1?'open-status':'close-status'"
                                     @click="operation('status',scope.row.id,scope.row.status)">
                                    {{scope.row.status_text}}
                                </div>
                                {if condition = "$auth->check('oil/fuel/index')"}
                                <div class="edit-btn-text cursor-pointer" @click="operation('fuel',scope.row.id)">
                                    油号
                                </div>
                                {/if}
                                {if condition = "$auth->check('oil/store/store/edit')"}
                                <div class="edit-btn-text cursor-pointer" @click="operation('edit',scope.row.id)">
                                    编辑
                                </div>
                                {/if}
                                {if condition = "$auth->check('oil/store/store/del')"}
                                <div class="delete-btn-text cursor-pointer" @click="operation('delete',scope.row.id)">
                                    删除
                                </div>
                                {/if}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <div class="sum-pagination-container">

            <div class="display-flex">
                <div style="margin-right: 40px;"><el-checkbox v-model="allcheckeds" @change="changeAllcheckeds">批量</el-checkbox></div>
                <div class="display-flex multiple-set-item" :class="multipleSelection.length>0?'multiple-set-acitve':''">
                    <div class="multiple-set-acitve-1" @click="setStatus(0)">关闭</div>
                    <div class="multiple-set-acitve-1" @click="setStatus(1)">启用</div>
                </div>
            </div>

            <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="currentPage"
                           :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
                           :total="totalPage">
            </el-pagination>
        </div>


    </div>
</div>